import { _decorator, Label, Button, Node, Vec3, v3 } from 'cc';
import { BasePanel } from '../../../../scripts/libs/ui/BasePanel';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
import { ReactiveProperty } from '../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { FeatureKey } from '../../../../scripts/managers/DevConfig';
import { lm } from '../../LobbyManager';
import { i18n } from '../../../../scripts/i18n';
import { SpriteFrame } from 'cc';
import { Sprite } from 'cc';
import { forkJoin, Observable } from 'rxjs';
import { TweenToStart } from '../../../../scripts/libs/rxjs/cc3/TweenStart';
const { ccclass, property } = _decorator;

@ccclass('FeatureUnlockPanel')
export class FeatureUnlockPanel extends BasePanel {

    featureKey = ReactiveProperty.Create<FeatureKey>(null);

    @property(Node)
    mainNode: Node = null;

    @property(Label)
    contentLabel: Label = null;

    @property(Button)
    closeButton: Button = null;

    @property(SpriteFrame)
    titleSpriteFrame: SpriteFrame[] = []

    @property(SpriteFrame)
    imgSpriteFrame: SpriteFrame[] = []

    @property(Sprite)
    titleSprite: Sprite = null;

    @property(Sprite)
    imgSprite: Sprite = null;

    private typeData = {
        'pipe': 0,
        'block_blind': 1,
        'adult_blind': 2,
        'joint': 3
    }

    willBind(): void {
        lm.pausePanelOpened.value = true;
        // this.adaptive();
        this.mainNode.setScale(.5, .5, .5);
    }

    useObserves() {
        return [
            this.featureKey.subscribe(this.refresh.bind(this)),
            BindButton(this.closeButton).subscribe(this.closeButtonClicked.bind(this))
        ];
    }

    // adaptive() {
    //     this.mainNode.setScale(v3(Vec3.ONE).multiplyScalar(lm.getAdaptiveScale()));
    // }

    openPanelAnim(): Observable<any> {
        return forkJoin([
            TweenToStart(this.ensureUIOpacity(), .2, { opacity: 255 }, { easing: 'expoOut' }),
            TweenToStart(this.mainNode, .4, { scale: lm.getAdaptiveScaleV3() }, { easing: 'backOut' }),
        ]);
    }

    closePanelAnim(): Observable<any> {
        this.ensureUIOpacity();
        return forkJoin([
            TweenToStart(this.ensureUIOpacity(), .2, { opacity: 0 }, { easing: 'expoIn' }),
            TweenToStart(this.mainNode, .2, { scale: v3(.5, .5, .5) }, { easing: 'backIn' }),
        ]);
    }

    onDestroyView(): void {
        lm.pausePanelOpened.value = false;
    }

    refresh() {
        if (this.featureKey.value == null) return;
        // let param = DevConfig.ITEM_PARAM[this.itemKey.value] as ItemParam;
        // this.contentLabel.string = `${i18n.t(`feature.${this.featureKey.value}.name`)}\n${i18n.t(`feature.${this.featureKey.value}.desc`)}`;
        this.contentLabel.string = `${i18n.t(`feature.${this.featureKey.value}.desc`)}`;
        this.titleSprite.spriteFrame = this.titleSpriteFrame[this.typeData[this.featureKey.value]]
        this.imgSprite.spriteFrame = this.imgSpriteFrame[this.typeData[this.featureKey.value]]
    }

    closeButtonClicked() {
        FeatureUnlockPanel.CloseProcess(null, 'close');
    }

}

